<template>
    <view class="signInDetailPage">
        <view class="consultantBox">
            <view class="consultantBox_title">
                <view class="consultantBox_title_border" />
                <view class="consultantBox_title_text">
                    <u-text color="#333" size="34rpx" bold text="会议详情" />
                </view>
            </view>
        </view>
        <view v-if="hotState.data.picture">
            <u-image
                height="378rpx"
                width="694rpx"
                :src="hotState.data.picture"
                mode="aspectFill"
                radius="12rpx"
            />
            <u-gap height="20rpx" />
        </view>
        <u-skeleton
            avatar
            :loading="hotState.loading"
            avatarSize="120rpx"
            rows="1"
            :rowsWidth="['120rpx']"
            titleWidth="120rpx"
        >
            <view
                class="person_box"
                hover-class="person_box_hoverClass"
                @click="toCard"
            >
                <view class="person_box_left_text">
                    <u-text
                        :text="hotState.data.salesmanName"
                        size="40rpx"
                        bold
                        color="#333"
                    />
                    <u-text
                        :text="hotState.data.postName"
                        size="26rpx"
                        bold
                        margin="12rpx 0 0"
                        color="#666666"
                    />
                </view>
                <view class="person_box_left">
                    <u-image
                        width="90rpx"
                        height="90rpx"
                        :src="
                            hotState.data.avatar ||
                            'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/13/b78dfa7ff5bb49da8c83e7cd11f9859c.png'
                        "
                        shape="circle"
                    ></u-image>
                    <u-icon name="arrow-right" size="30rpx" color="#588BF3" />
                </view>
            </view>
        </u-skeleton>

        <view class="detail">
            <!-- 骨架 loading状态（网速慢或者服务器响应慢的时候用来加载的loading状态） -->
            <u-skeleton
                :loading="hotState.loading"
                avatarSize="120rpx"
                rows="6"
                :rowsWidth="[
                    '120rpx',
                    '400rpx',
                    '120rpx',
                    '400rpx',
                    '120rpx',
                    '400rpx',
                ]"
                :title="false"
            >
                <view class="detail_title">
                    <u-text text="会议主题" color="#666" size="26rpx" />
                    <u-gap height="10rpx" bgColor="#FFF" />
                    <u-text
                        :text="hotState.data.theme"
                        color="#333"
                        size="40rpx"
                        bold
                    />
                </view>
                <view class="detail_title">
                    <u-gap height="10rpx" bgColor="#FFF" />
                    <u-text text="讲师" color="#666" size="26rpx" />
                    <u-gap height="10rpx" bgColor="#FFF" />
                    <u-text
                        :text="hotState.data.lecturer"
                        color="#333"
                        size="28rpx"
                    />
                </view>
                <!-- <view class="detail_title">
                    <u-gap height="10rpx" bgColor="#FFF" />
                    <u-text text="主办方" color="#666" size="26rpx" />
                    <u-gap height="10rpx" bgColor="#FFF" />
                    <u-text
                        :text="hotState.data.organizer || '-'"
                        color="#333"
                        size="28rpx"
                    />
                </view>
                <view class="detail_title">
                    <u-gap height="10rpx" bgColor="#FFF" />
                    <u-text text="负责人" color="#666" size="26rpx" />
                    <u-gap height="10rpx" bgColor="#FFF" />
                    <u-text
                        :text="`${hotState.data.organizerPerson}(${hotState.data.organizerPhone})`"
                        color="#333"
                        size="28rpx"
                    />
                </view> -->
                <view class="detail_time">
                    <u-text text="时间" color="#666" size="26rpx" />
                    <u-gap height="10rpx" bgColor="#FFF" />
                    <u-text
                        color="#333"
                        size="28rpx"
                        :text="`${
                            (hotState &&
                                hotState.data &&
                                $u.timeFormat(
                                    hotState.data.startTime,
                                    'yyyy/mm/dd hh:MM'
                                )) ||
                            '-'
                        } - ${
                            (hotState &&
                                hotState.data &&
                                $u.timeFormat(
                                    hotState.data.endTime,
                                    'yyyy/mm/dd hh:MM'
                                )) ||
                            '-'
                        }`"
                    />
                </view>
                <view class="detail_address">
                    <u-text text="地点" color="#666" size="26rpx" />
                    <u-gap height="10rpx" bgColor="#FFF" />
                    <u-text
                        :text="`${hotState.data.addressName || ''}${
                            hotState.data.address
                        }`"
                        color="#333"
                        size="28rpx"
                        bold
                    />
                </view>
            </u-skeleton>
        </view>
        <view class="signButton">
            <u-skeleton
                :loading="hotState.loading"
                avatarSize="120rpx"
                rows="1"
                :rowsWidth="['700rpx']"
                :rowsHeight="['80rpx']"
                :title="false"
            >
                <u-button
                    :disabled="!hotState"
                    text="签到"
                    color="#588BF3"
                    shape="circle"
                    @click="signInLoction"
                    v-if="
                        !hotState.data.haveSignedIn &&
                        (hotState.data.meetState === '0' ||
                            $u.timeFormat(
                                hotState.data.endTime,
                                'yyyy/mm/dd hh:MM' > 'yyyy/mm/dd 24:00'
                            ))
                    "
                    :loading="signInloading"
                />
                <u-text
                    v-if="hotState.data.haveSignedIn"
                    align="center"
                    text="已签到"
                    size="36rpx"
                    space="10rpx"
                    color="#000"
                    width="48rpx"
                    height="48rpx"
                    prefixIcon="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/13/4c08432224cc4ce0a2cc467dfdca5638.png"
                    :iconStyle="iconStyle"
                />
            </u-skeleton>
        </view>
        <getphonenumber />
        <u-notify message="成功" ref="uNotify" show></u-notify>

        <u-modal
            :show="nameShow"
            ref="editModal"
            title="姓名设置"
            @confirm="nameConfirmEdit"
            confirmColor="#1682FF"
        >
            <view slot="default" style="width: 100%">
                <u--text
                    :text="'当前手机号: ' + phone"
                    size="32rpx"
                    color="#3D3D3D"
                    lineHeight="80rpx"
                ></u--text>
                <u--input
                    type="text"
                    placeholder="请输入您的姓名"
                    clearable
                    v-model="signinName"
                    :customStyle="{
                        background: '#F7F7F7',
                        borderRadius: '16rpx 16rpx 16rpx 16rpx',
                        border: 'none',
                        height: '80rpx',
                    }"
                    :placeholderStyle="{
                        fontSize: '28rpx',
                        color: '#F7F7F7',
                    }"
                ></u--input>
            </view>
        </u-modal>
    </view>
</template>

<script>
import { useRequest } from "@/js_sdk/tla-useRequest/useRequest.js";
import { updateCustomerByCustomerId } from "@/api/login.js";
import getphonenumber from "@/components/getphonenumber/getphonenumber.vue";
import {
    getMeetingWithSalesMan2,
    CustomerMeetingSignIn,
} from "@/api/sign_in.js";
import { getCustomerIdBySalesmanId } from "@/api/card";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            coordinatesX: "", //经度
            coordinatesY: "", //纬度
            iconStyle: {
                width: "48rpx",
                height: "48rpx",
                marginRight: "20rpx",
            },
            signUpId: null,
            hotState: { data: {} },
            shownotify: false,
            signInloading: false,
            nameShow: false,
            signinName: "",
        };
    },
    computed: {
        ...mapGetters(["userInfo", "phone", "isLogin"]),
    },
    components: {
        getphonenumber,
    },
    beforeDestroy() {
        if (this.isLogin) {
            uni.removeStorageSync("loginBackUrl");
            uni.removeStorageSync("loginBackUrlOption");
        }
    },
    onLoad(option) {
        var scene = decodeURIComponent(option.scene);
        const optionlist = scene.split("&") || [];

        this.signUpId = optionlist[0];
        // TODO 这段代码解决 业务员礼品码分享给客户 客户角色进入 正常扫码 ，业务员扫码 进入礼品详情页面customer 客户端 salesman 业务员
        var pages = getCurrentPages(); // 获取栈实例
        if (pages.length === 1) {
            let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
            uni.setStorageSync("loginBackUrl", "/" + currentRoute);
            uni.setStorageSync("loginBackUrlOption", option);
        }
        if (!this.isLogin)
            return uni.navigateTo({ url: "/pages/user/phone/indexApp" });

        // if (this.$store.getters?.authority === "salesman")
        //     return uni.$u.route({
        //         type: "redirectTo",
        //         url: "pages_conferenceDetail/detail/shareIndex",
        //         params: {
        //             meetId: optionlist[1],
        //             haveSignedUp: optionlist[2],
        //         },
        //     });
        this.hotState = useRequest(() =>
            getMeetingWithSalesMan2(this.signUpId)
        );
        // this.hotState = hotState;
    },
    methods: {
        async nameConfirmEdit() {
            if (!this.signinName)
                return uni.showToast({
                    title: "姓名！",
                    icon: "none",
                });
            //点击如果没有用户名字 直接同步到用户名称
            const paramsUserInfo = {
                nickName: this.signinName,
                realName: this.signinName,
                id: this.userInfo.id,
            };
            await updateCustomerByCustomerId(paramsUserInfo).then((res) => {
                this.nameShow = false;
                this.$store.dispatch("USERINFO", { $u: uni.$u });
            });
        },
        async toCard() {
            const { data, code } = await getCustomerIdBySalesmanId(
                this.hotState.data.salesManId
            );
            console.log(this.hotState.data.salesManId, "e", data);
            const that = this;
            uni.$u.route({
                type: "redirectTo",
                url: "pages_card/user_card/index",
                params: {
                    salesmanId: that.hotState.data.salesManId,
                    customerId: data,
                },
            });
        },
        tips(meesage, type, colorbg) {
            this.$refs.uNotify.show({
                top: 0,
                type: type,
                color: "#FFF",
                // bgColor: '#588bf3',
                message: meesage,
                duration: 2000,
                fontSize: "28rpx",
                safeAreaInsetTop: false,
            });
        },
        signInLoction() {
            console.log(this.userInfo.realName, "111");
            if (!this.userInfo.realName) return (this.nameShow = true);

            if (this.hotState.data.verifyType == "1") {
                this.getLocationNow();
            } else {
                this.signInHandler();
            }
        },
        signInHandler() {
            const that = this;
            if (!this.phone) {
                this.$store.commit("SET_SHOW_PHONE_NUMBER", true);
            } else {
                const params = {
                    customerId: this.userInfo.id,
                    meetId: this.hotState.data.meetId,
                    meetSignId: this.signUpId,
                    salesmanMobile: this.hotState.data.salesManMobile,
                    salesmanName: this.hotState.data.salesmanName,
                    salesmanId: this.hotState.data.salesManId,
                };
                that.signInloading = true;
                CustomerMeetingSignIn(params).then((res) => {
                    that.signInloading = false;
                    if (res.code === 200) {
                        this.tips(res.data, "success", "#588bf3");
                        uni.$u.sleep(200).then(() => {
                            that.hotState.reFresh();
                        });
                    } else if (
                        res.code === 500 &&
                        res.msg == "该会议不在进行中状态！无法签到！"
                    ) {
                        this.tips("会议暂未开始即将前往报名页面");
                        uni.$u.sleep(800).then(() => {
                            uni.$u.route({
                                type: "redirectTo",
                                url: "/pages_signin/userCheckin/index",
                                params: {
                                    meetId: this.hotState.data.meetId,
                                    salesmanId: that.hotState.data.salesManId,
                                },
                            });
                        });
                    } else {
                        this.tips(res.msg, "error");
                    }
                });
            }
        },
        getLocationNow() {
            const that = this;
            uni.getLocation({
                type: "wgs84",
                altitude: true,
                success: function (res) {
                    that.coordinatesX = res.longitude;
                    that.coordinatesY = res.latitude;

                    //纬度差
                    let Lat1Radom =
                        (that.hotState.data.coordinatesX * Math.PI) / 180.0;
                    let Lat2Radom = (that.coordinatesX * Math.PI) / 180.0;
                    let lat = Lat1Radom - Lat2Radom;
                    //经度差
                    let Long1Radom =
                        (that.hotState.data.coordinatesY * Math.PI) / 180.0;
                    let Long2Radom = (that.coordinatesY * Math.PI) / 180.0;
                    let long = Long1Radom - Long2Radom;
                    //计算两点之间的实际距离（经过我的查询这个公式叫做:Haversine公式）
                    let s =
                        2 *
                        Math.asin(
                            Math.sqrt(
                                Math.pow(Math.sin(lat / 2), 2) +
                                    Math.cos(Lat1Radom) *
                                        Math.cos(Lat2Radom) *
                                        Math.pow(Math.sin(long / 2), 2)
                            )
                        );
                    s = s * 6378.137;
                    s = Math.round(s * 10000) / 10000;
                    //保留最后两位小数
                    s = s.toString();
                    s = s.substring(0, s.indexOf(".") + 2);
                    //提醒一下，这里的获取的距离，也就是s的单位是Km

                    if (s < 1) {
                        that.hotState.data.verifyType == "0";
                        that.signInHandler();
                    } else {
                        uni.showToast({
                            title: "您的位置不在范围内,不支持签到",
                            icon: "none",
                            duration: 2000,
                        });
                    }
                },
                fail: function (res) {
                    uni.getSetting({
                        success: (res) => {
                            let authSetting = res.authSetting;
                            if (!res.authSetting["scope.userLocation"]) {
                                uni.showModal({
                                    title: "您未开启地理位置授权",
                                    content: "小程序将无法正常使用",
                                    success: (res) => {
                                        if (res.confirm) {
                                            uni.openSetting();
                                        }
                                    },
                                });
                            } else {
                                uni.showModal({
                                    title: "您未开启手机地理位置",
                                    content: "小程序将无法正常使用",
                                    success: (res) => {
                                        if (res.confirm) {
                                            uni.openSetting();
                                        }
                                    },
                                });
                            }
                        },
                    });
                },
            });
        },
    },
};
</script>

<style lang="scss">
.signInDetailPage {
    background-color: #fff;
    // height: 100vh;
    padding: 40rpx 28rpx;
    box-sizing: border-box;

    .consultantBox {
        padding-bottom: 18rpx;

        &_title {
            display: flex;
            align-items: center;

            &_border {
                width: 10rpx;
                background-color: $uni-color-primary;
                height: 32rpx;
            }

            &_text {
                padding-left: 24rpx;
            }
        }
    }

    .person_box_hoverClass {
        transition: 0.05s;
        opacity: 0.7;
    }

    .person_box {
        display: flex;
        width: 100%;
        // height: 146rpx;
        background: linear-gradient(
            135deg,
            #deebf9 0%,
            rgba(255, 255, 255, 0) 100%
        );
        justify-content: space-between;
        padding: 22rpx 20rpx;
        box-sizing: border-box;
        align-items: center;

        &_left {
            display: flex;
            align-items: center;

            &_text {
                margin-left: 12rpx;
            }
        }
    }

    .detail {
        width: 100%;
        padding: 0 12rpx;
        box-sizing: border-box;
        margin-top: 32rpx;

        &_title {
            width: 100%;
            padding: 0 0 24rpx;
            box-sizing: border-box;
            border-bottom: 2rpx solid rgba(153, 153, 153, 0.3);
        }

        &_time {
            padding: 24rpx 0;
            border-bottom: 2rpx solid rgba(153, 153, 153, 0.3);
        }

        &_address {
            padding: 24rpx 0;
        }
    }

    .signButton {
        width: 100%;
        margin-top: 100rpx;
    }
}
</style>
